<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>题目管理列表</title>
    <link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuiadmin/style/admin.css}" media="all">
    <link rel="stylesheet" th:href="@{/font-awesome-4.7.0/css/font-awesome.min.css}">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div style="padding-bottom: 10px;">
                <button class="layui-btn layuiadmin-btn-admin" data-type="batchdel">删除</button>
                <button class="layui-btn layuiadmin-btn-admin" data-type="add">随机生成试卷</button>
            </div>
            <table id="table" lay-filter="table"></table>
        </div>
    </div>
</div>

<script th:src="@{/layuiadmin/layui/layui.js}"></script>

<script type="text/html" id="table_admin">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="fa fa-trash-o"></i>删除</a>
</script>

<script>

    layui.use(['jquery','layer', 'table'], function(){
        let table = layui.table;
        let layer = layui.layer;
        let $ = layui.jquery;
        //执行一个 table 实例
        table.render({
            elem: '#table',
            height: 450,
            url: '/manager/paperList', //数据接口
            title: '试卷管理列表',
            page: true,
            limit: 10,
            limits: [5,10,15,20],
            cols: [
                [ //表头
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'id', title: '编号', width:60},
                    {field: 'title', title: '试卷名', width:200},
                    {field: 'score', title: '总分', width:80},
                    {fixed: 'right',title:'操作', width: 240, align:'center', toolbar: '#table_admin'}
                ]
            ],
            //用于搜索结果重载
            id: 'sreload'
        });


        let active = {

            add: function() {
                $.ajax({
                    url:'/manager/addPaper',
                    dataType:'json',
                    type:'post',
                    success:function (data) {
                        if (data.success){
                            window.location.reload();
                        }else{
                            layer.msg(data.message);
                        }
                    }
                })
            },
            batchdel:function () {
                var checkAll = table.checkStatus('sreload');
                if(checkAll.data.length == 0){
                    layer.msg('请选择数据进行删除');
                }else{
                    layer.confirm('真的删除行么', function(){
                        var jsonObj = {};
                        for(var i=0;i<checkAll.data.length;i++){
                            jsonObj["ids["+i+"]"] = checkAll.data[i].id;
                        }
                        $.ajax({
                            url:'/manager/delPaper',
                            data:jsonObj,
                            dataType:'json',
                            type:'post',
                            success:function (data) {
                                if (data.success){
                                    window.location.reload();
                                }else{
                                    layer.msg(data.message);
                                }
                            }
                        })
                    });
                }
            }
        };

        $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        table.on('tool(table)', function(obj){ //注：tool 是工具条事件名，table 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'edit'){
                edit(data);
            } else if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    del(data,obj,index);
                });
            }
        });

        //后边两个参数仅仅是因为要执行动态删除dom
        function del(data,obj,index){
            var jsonObj = {};
            jsonObj["ids[0]"] = data.id;
            $.ajax({
                url:'/manager/delPaper',
                data:jsonObj,
                dataType:'json',
                type:'post',
                success:function (data) {
                    if (data.success){
                        obj.del(); //删除对应行（tr）的DOM结构
                        layer.close(index);
                    }else{
                        layer.msg(data.message);
                    }
                }
            })
        }

    });


</script>
</body>
</html>